import { ScrollView, View, Text, Image, } from '@tarojs/components';
import React, { Component } from 'react';
import { AtModal, AtModalHeader, AtModalContent, AtModalAction } from "taro-ui"
import Taro, { getCurrentInstance } from '@tarojs/taro';
import { connect } from 'react-redux';
import './index.less';
import * as T from './types';
import actions from './actions';
import { store2Props } from './selectors';
import uesrImg from '@/assets/image/my/uesr_pic.png'
import "taro-ui/dist/style/components/modal.scss";

actions().actions.loadReducer();
// @ts-ignore
@connect<Partial<T.IProps>, any>(store2Props, actions)
export default class Index extends Component<Partial<T.IProps>, any> {
  constructor(props) {
    super(props);
    this.state = {
      id: ''
    };
  }

  componentDidMount() {
    this.props.actions.init()
  }

  componentDidShow() { }

  componentWillUnmount() {
    this.props.actions.clean();
  }

  renderUser(list) {
    let {
      main: { currentHouse },
      actions: { action },
    } = this.props;
    let listView = [];
    list.map((item, index) => {
      listView.push(
        <View className='AtSwipe' style={{ backgroundColor: '#ffffff', padding: '0 0 0 15rpx', }}>
          <View className='b_row'>
            <View className='center' style={{ flex: 2 }}>
              <View className='c_icon'>
                {item.pictureUrl ? (
                  <Image className='icon' src={item.pictureUrl} mode="aspectFill" />
                ) : (
                  <Image className='icon' src={uesrImg} mode="aspectFill" />
                )}
              </View>
            </View>
            <View className='c_sb' style={{ flex: 5, padding: '15rpx 0 15rpx 0', }}>
              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                <Text className='l_font'>{item.houseHoldName}</Text>
                {item.houseHoldType == 1 ? (
                  <Text className='ht_1'>业主</Text>
                ) : item.houseHoldType == 2 ? (
                  <Text className='ht_2'>租客</Text>
                ) : (
                  <Text className='ht_3'>家属</Text>
                )}
              </View>
              <View style={{ flexDirection: 'row' }}>
                <Text className='l_font1' style={{ marginRight: '8rpx' }}>
                  {item.county}
                </Text>
                <Text className='d_border'></Text>
                <Text className='l_font1' style={{ marginLeft: '8rpx', marginRight: '8rpx' }}>
                  {item.street}
                </Text>
                <Text className='d_border'></Text>
                <Text className='l_font1' style={{ marginLeft: '8rpx' }}>
                  {item.houseArea}㎡
                </Text>
              </View>
            </View>
            <View className='center'
              style={{
                flex: 2.5,
                padding: '0 15rpx',
                flexDirection: 'row',
                alignItems: 'flex-end',
                justifyContent: 'flex-end',
              }}>
              {item.status == 0 && currentHouse[0].houseHoldType == 1 ? (
                <View
                  className='statusBtn'
                  onClick={() => {
                    this.setState({ id: item.id })
                    action.commonChange('main.showModel', true);
                  }}
                >
                  <Text className='btnText'>审核</Text>
                </View>
              ) : (
                <View
                  style={{
                    position: 'absolute',
                    right: '0',
                    top: '0',
                    borderBottomLeftRadius: '10rpx',
                    overflow: 'hidden',
                  }}>
                  <Text
                    className={
                      item.status == 0
                        ? 'statusText1'
                        : item.status == 2 || item.status == 4
                          ? 'statusText2'
                          : 'statusText'
                    }>
                    {item.status == 0
                      ? '待审核'
                      : item.status == 1
                        ? '业主审核通过'
                        : item.status == 2
                          ? '业主审核不通过'
                          : item.status == 3
                            ? '物业审核通过'
                            : item.status == 4
                              ? '物业审核不通过'
                              : '未知'}
                  </Text>
                </View>
              )}
            </View>
          </View>
        </View>,
      );
    });
    return listView;
  }

  //取消
  async handleClose() {
    this.props.actions.action.commonChange('main.showModel', false);
  }

  //拒绝
  async handleCancel() {
    let { id } = this.state;
    this.props.actions.action.houseProve(id, 2)
  }

  //通过
  async handleConfirm() {
    let { id } = this.state;
    this.props.actions.action.houseProve(id, 1)
  }

  render() {
    let {
      main: { owner, other, currentHouse, showModel },
      actions: { action },
    } = this.props;
    return (
      <ScrollView className="packageAHouseDetail" scrollY>
        {owner.length > 0 && (
          <View className='AtSwipe'>
            <View style={{ flex: 1 }}>
              <View className='l_top'>
                <Text className='w_30'>
                  {owner[0].communityName}
                </Text>
                <Text className='w_24'>
                  {owner[0].buildingName}栋
                  {owner[0].unitName}
                  单元
                  {owner[0].houseCode}室
                </Text>
              </View>
              <View className='b_row' style={{ backgroundColor: '#ffffff', padding: '20rpx' }}>
                <View className='center' style={{ flex: 2 }}>
                  <View className='c_icon'>
                    {owner[0].pictureUrl ? (
                      <Image className='icon' src={owner[0].pictureUrl} mode="aspectFill" />
                    ) : (
                      <Image className='icon' src={uesrImg} mode="aspectFill" />
                    )}
                  </View>
                </View>
                <View className='c_sb' style={{ flex: 5, padding: '15rpx 0 15rpx 20rpx', }}>
                  <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                    <Text className='l_font'>
                      {owner[0].houseHoldName}
                    </Text>
                    {owner[0].houseHoldType == 1 ? (
                      <Text className='ht_1'>业主</Text>
                    ) : owner[0].houseHoldType == 2 ? (
                      <Text className='ht_2'>租客</Text>
                    ) : (
                      <Text className='ht_3'>家属</Text>
                    )}
                  </View>
                  <View style={{ flexDirection: 'row' }}>
                    <Text className='l_font1' style={{ marginRight: '8rpx' }}>
                      {owner[0].county}
                    </Text>
                    <Text className='d_border'></Text>
                    <Text className='l_font1' style={{ marginLeft: '8rpx', marginRight: '8rpx' }}>
                      {owner[0].street}
                    </Text>
                    <Text className='d_border'></Text>
                    <Text className='l_font1' style={{ marginLeft: '8rpx' }}>
                      {owner[0].houseArea}㎡
                    </Text>
                  </View>
                </View>
                <View className='center' style={{ flex: 2.5, padding: '15rpx 0', }}>
                  <Text className='t_right'></Text>
                </View>
              </View>
            </View>
          </View>
        )}
        {other.length > 0 && (
          <View style={{ padding: '30rpx 15rpx' }}>
            <Text className='l_font'>房屋其他住户</Text>
          </View>
        )}
        {other.length > 0 && this.renderUser(other)}
        <View className="bottom">
          <View className="btn_box">
            <Text className='btn-release'
              onClick={() => {
                action.switchHouse(currentHouse[0].userHouseId)
              }}
            >切换为当前房屋</Text>
          </View>
        </View>
        {
          showModel &&
          <AtModal
            isOpened
            title='提示'
            cancelText='不通过'
            confirmText='通 过'
            onClose={this.handleClose}
            onCancel={this.handleCancel}
            onConfirm={this.handleConfirm}
            content='该用户是否通过审核?'
          />
        }
      </ScrollView>
    );
  }
}
